﻿@{
    ViewBag.Title = "- Home Page";
}

<div id="dialog" title="Basic dialog" style="display:none">
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<div id="switcher"></div>

<div id="panel" class="ui-corner-all">
    <input id="employee" class="ui-widget ui-state-default ui-corner-all" />
    <div id="content">
        <div id="content-left">
            <button id="buttonin" class="doactivity">Clock In</button>
            <button id="buttonout" class="doactivity">Clock Out</button>
            <h1 id="hour"></h1>
            <h2 id="date"></h2>
        </div>
        <div id="content-right">
            <div>
                <img src="http://www.gfdb.com/images/no_photo.jpg" alt="Employee's Picture" title="Employee's Picture" style="float:right; width:90px; height:120px" />
                <h2>Fulano da Silva Agostino de Souza</h2>
                <p>
                    <label>Id:</label>
                    <span>89768</span>
                </p>
                <p>
                    <label>Action:</label>
                    <span>Check In</span>
                </p>
                <p>
                    <label>Time:</label>
                    <span>08:25:07</span>
                </p>
                <p>
                    <label>Date:</label>
                    <span>12/07/2011</span>
                </p>
                <p>
                    <label>Notes:</label>
                    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in velit diam. Quisque quis sapien eros.</span>
                </p>
                <button id="clear">Clear</button>
            </div>
        </div>
        <br class="clear" />
    </div>
</div>

<style type="text/css">
	.ui-autocomplete-department {
	    clear: left;
	    float: left;
		font-weight: bold;
		padding: .2em .3em;
		margin: .5em 0 0;
		line-height: 1em;
	}
	#switcher{position:absolute; top:52px; right:10px}
</style>

<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script src="@Url.Content("~/Scripts/Date.js")" type="text/javascript"></script>

<script type="text/javascript">
    $.widget("custom.departmentcomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var self = this,
				currentDepartment = "";
            $.each(items, function (index, item) {
                if (item.department != currentDepartment) {
                    ul.append('<li class="ui-autocomplete-department">' + item.department + '</li>');
                    currentDepartment = item.department;
                }
                self._renderItem(ul, item);
            });
        },
        _renderItem: function( ul, item ) {
			return $('<li/>')
				.data( "item.autocomplete", item )
				.append('<a>' + item.id + ' - ' + item.label + '</a>')
				.appendTo(ul);
		}
    });

    /*
    *http://forums.asp.net/post/930808.aspx
    */
    var Timetick = {
        timeServer: null,
        _milliDiff: null,

        _clock: function () {
            var time = new Date();
            time.setMilliseconds(time.getMilliseconds() - Timetick._milliDiff);
            $('#hour').html(time.toString('HH:mm:ss'));
            $('#date').html(time.toString('dd/MM/yyyy'));
        },

        show: function () {
            Timetick._milliDiff = (new Date() - Timetick.timeServer);
            Timetick._clock();
            setInterval("Timetick._clock()", 1000);
        }
    };

    $(function () {
        var dialog = $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            position: ['center', 60],
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

        var data = [
			{ id: 587123, label: "Antonio da Silva", department: "Desenvolvimento" },
			{ id: 75643, label: "João Alberto", department: "Desenvolvimento" },
			{ id: 7234, label: "Fulano Constancio", department: "Suporte" },
			{ id: 67263, label: "Maria Aparecida Agostino e Souza", department: "Suporte" },
			{ id: 2347, label: "John Brians", department: "Suporte" },
			{ id: 93674, label: "Gato de Botas", department: "Atendimento" },
			{ id: 6530, label: "Shrek", department: "Atendimento" },
			{ id: 17657, label: "Fiona", department: "Atendimento" },
			{ id: 69456, label: "Ciclano Adalberto", department: "Manutenção" }
		];

        $("#employee").departmentcomplete({
            delay: 0,
            source: data
        });

        $('#buttonin').button({ icons: { primary: 'ui-icon-circle-arrow-n'} });
        $('#buttonout').button({ icons: { primary: 'ui-icon-circle-arrow-s'} });
        $('#clear').button({ icons: { primary: 'ui-icon-circle-close'} });

        $('#switcher').themeswitcher();

        Timetick.timeServer = Date.parse('@DateTime.Now.ToString("yyyy.MM.dd HH:mm:ss")');
        Timetick.show();

        $('.doactivity').click(function () {
            dialog.dialog('open');
        });
    });
</script>